import React, { Component } from 'react';
import { Form, Input, Button, message } from 'antd'
import { connect } from 'react-redux'
import { Navigate } from 'react-router-dom'
import { createSaveUserInfoAction } from '../../redux/action_craetors/login_action'
import store from '../../redux/store';
import withHook from './widthHook'
import PubSub from 'pubsub-js'
import { meshLog, SPSet } from '../../config';
import './css/login.less'
import { reqLogin } from '../../api/index.js';
import 'antd/dist/antd.less';
import { Light } from '../../const/infoConst';
import LogoActivity from '../../static/imgs/logo.png'
import maxtrim from '../../static/imgs/touxiang.png'
import { homeDeng } from "../../api/index"
const { Item } = Form
class Login extends Component {
    componentDidMount() {
        //默认执行的方法
    }
    // 点击登录按钮的回调
    handleSubmit = async (values) => {
        const { phone, password } = values
        //meshLog('values24', values);
        let result = await reqLogin(phone, password)
        const { code, msg } = result
        meshLog('result', result);
        const date = {
            token: result.token,
            meshList: result.meshList,
            isLogin: false,
            phone: phone,
            useName: result.name
        }
        if (code == 0) {
            //meshLog('登录成功');
            SPSet('password', password)
            // meshLog(date);//所需要的数据 meshList:result.meshList
            //2 上面的获取的东西要交给redux管理
            store.dispatch(createSaveUserInfoAction(date))
            //this.props.saveUserInfo({ date })
            //  SPSet('bomb2', JSON.stringify(0));//控制admin切换站点的弹框

            this.props.to('/admin')//跳转到admin
            PubSub.publish('kaiqi', '')//控制admin的弹框
            // const opCode = "E3A507";
            // const token = '9ffaf842-dbf4-3341-5de2-1678ff8d1ae1'
            // const phone = SPGet('phone')
            // const meshUUID = SPGet('meshUUID')
            // const values = "1E";
            // let adds = 'FFFF'
            // let addrs = adds.substring(2, 4) + adds.substring(0, 2);
            // let resultt = await homeDeng(token, phone, meshUUID, addrs, opCode, values)
            // meshLog('', token, phone, meshUUID, addrs, opCode, values);
        } else {
            message.warning('Account password information error', 1)
            meshLog('login.jsx,用户名或者密码不对');
            //alert('"Account password information error')
        }
    };
    onFinishFailed = (errorInfo) => {
        meshLog('login.jsx,输入不对Failed:', errorInfo);
    };
    render() {
        const { isLogin } = this.props;
        if (isLogin) {
            return <Navigate replace to="/admin" />//返回的到按面单
        }
        return (
            <div className='login' >
                <header className='header' style={{ textAlign: 'center', span: 100 }} >
                    <img className='img' src={LogoActivity} alt='' />
                </header>
                <div style={{ textAlign: 'center' }}>
                    <Form className='loginform' onFinish={this.handleSubmit} onFinishFailed={this.onFinishFailed} labelCol={{ span: 8, }} wrapperCol={{ span: 16, }}>

                        <div className='phonezi'>
                            <div className='sss' style={{ fontFamily: Light }} >账号</div>
                        </div>
                        <Item style={{ height: 32, }} className='phone' name="phone"
                            rules={[
                                { required: true, message: 'Please input your username!', },
                                { max: 50, message: '', },
                                { min: 4, message: '', },
                                //{ pattern: /^[A-Za-z]+$/, message: '请输入正确格式', },
                            ]}>
                            <Input style={{ width: 340, borderRadius: 25, height: 40, fontSize: 20 }} placeholder="USERNAME" />
                        </Item>
                        <div className='passwordzi'>
                            <span className='ppp' style={{ fontFamily: Light }} >密码</span>
                        </div>
                        <Item className='password' name="password"
                            rules={[
                                { labelWrap: true },
                                { required: true, message: 'Please input your password!', },
                                { max: 12, message: '', },
                                { min: 4, message: '', },
                                { pattern: /^\w+$/, message: '', },
                            ]}>
                            <Input.Password style={{ width: 340, borderRadius: 25, height: 40, }} placeholder="password" />
                        </Item>
                        <Item className='submit' wrapperCol={{ offset: 8, span: 16, }} >
                            <Button type="primary" style={{ width: 340, borderRadius: 25, height: 40, backgroundColor: '#ac5b86' }} htmlType="submit">登录</Button>
                        </Item>
                    </Form>
                </div>
            </div>
        )
    }
}
export default connect(
    state => ({}),
    {
        saveUserInfo: createSaveUserInfoAction,
    }
)(withHook(Login))
//export default  (withHook(Login))
  //点击登录按钮的回调
  // handleSubmit = (event)=>{
  //     event.preventDfault();//阻止默认事件--禁止form表单提交--通过Ajax发送
  //     this.props.form.validatefields (()=>{ 已经不使用了
  //         const{username,password} = values
  //            if(!err){
  //             let result = await reqLogin(username,password)
  //             const {status,msg,data} = result
  //             if(status === 0){
  //                 meshLog(data);
  //                 //跳转到admin
  //             }else{
  //                 message.warning(msg)
  //             }
  //            }  else{
  //             message.error('表单输入有误，请检查！')
  //            }
  //             });
  //         }
